<template>
	<div class="main">
		<div class="v_head">
			<nav class="v_title">
				<img src="../../../assets/image/default.png" alt="">
				<span class="v_span">
					{{positionDetail.positionName}}
				</span>
			</nav>
			<!-- 下方内容 -->
			<div class="v_font">
				<h4>
					<div class="v_name">
						<p class="ali">
              <!-- '50K元/月'值在接口里没找到 -->
							三年工作平均薪资(50K元/月)
						</p>
						<p class="v_content">{{positionDetail.oneLineSalary}} <i>VS</i> 本地 {{positionDetail.localSalary}}</p>
					</div>
					<div class="v_name" style="padding-left:80px;">
						<p class="ali">
							需求量(人)
						</p>
						<p class="v_content">
						社会需求量：{{positionDetail.totalDemand}}
						 <i>VS</i>
						 本地需求量： {{positionDetail.localDemand}}
						 </p>
					</div>

				</h4>
			</div>
			<!-- 中间内容 -->
			<div class="el_content">
				<main style="padding:30px 30px 30px 70px;">
					<h2 class="h2">
						名词解释
					</h2>
					<p class="h3 pt">
            {{positionDesc.nounInterpretation}}
					</p>
					<h2 class="h2">
						职位内容
					</h2>
					<p class="h3 pt">
            {{positionDesc.introduce}}
					</p>
					<h2 class="h2">
						职位要求
					</h2>
					<p class="h3">
            {{positionDesc.requirement}}
					</p>
				</main>

			</div>
		</div>
		<!-- 线 -->
		<section class="line">
		</section>
		<h1 class="v_info">
			一线以及各个省会的职位行情
		</h1>
		<!-- 省会行情 -->
		<div class="v_table">
			<el-table
		      :data="marketData"
		      style="width: 100%">
		      <el-table-column
		        prop="cityName"
		        label="地域"
		        width="300">
		      </el-table-column>
		      <el-table-column
		        prop="localDemand"
		        label="需求量"
		        width="300">
		      </el-table-column>
		      <el-table-column
		        prop="localAvgSalary"
		        label="3年经验平均工资">
		      </el-table-column>
		    </el-table>
		    <div class="showMore" @click="showMore">
		    	<span>{{unfoldInfo}}</span>
		    </div>
		</div>



		<section class="line">
		</section>
		<!-- 下面开始评论区 -->
		<div class="discuss">
			<div class="des_wrap">
				<div class="dec_pic">
					<img src="../../../assets/image/default.png" alt="">
				</div>
				<section class="dec_desc">
					<div class="dec_container">
						<div class="dec_title">
							<p class="text">微笑达人</p>
							<em class="date">"{{detail.creatTime}}"</em>
						</div>
						<div class="right1">
							<img src="../../../assets/image/zz.png" alt="">
							<em class="right">"{{detail.comment}}"</em>
						</div>
					</div>
					<p class="content">
						从流行的设计风格到符合产品定位的设计风格,再到充满品牌个性的设计风格,我和设计师在这中间经历了很多挫折。索性我们一直没有放弃，期间不断探索试错，沉淀方法，历经将近一年的时间最后终于找到了答案（在传统方法上的突破和创新）。
					</p>
					<div class="remove">
						<a href="#">删除</a>
					</div>
				</section>
			</div>
			<!-- 二级 -->
			<div class="huifu">
				<div class="des_wrap">
					<div class="dec_pic">
						<img src="../../../assets/image/default.png" alt="">
					</div>
					<section class="dec_desc">
						<div class="dec_container">
							<div class="dec_title">
								<p class="text">微笑达人</p>
								<em class="date">444</em>
							</div>
							<div class="right1" style="padding-right:30px;">
								<img src="../../../assets/image/zz.png" alt="">
								<em class="right">555</em>
							</div>
						</div>
						<p class="content" style="font-size:15px;color:#5d5d5d;">
							从流行的设计风格到符合产品定位的设计风格,再到充满品牌个性的设计风格,我和设计师在这中间经历了很多挫折。索性我们一直没有放弃，期间不断探索试错，沉淀方法，历经将近一年的时间最后终于找到了答案（在传统方法上的突破和创新）。
						</p>
						<div class="remove">
							<a style="padding-right:30px;" href="#">回复</a>
						</div>
					</section>
				</div>
			</div>
			<!-- 输入框 -->
			<div class="huifu huifu2">
				<div class="des_wrap">
					<div class="dec_pic">
						<img src="../../../assets/image/default.png" alt="">
					</div>
					<section class="dec_desc">
						<div class="dec_container">
							<div class="dec_title">
								<p class="text">本人</p>
								<em class="date">666</em>
							</div>
							<div id="edito" class="right1" style="padding-right:30px;">
								<span class="f_left">
									<i class="icon-back"></i>
									<i class="icon-go"></i>
									<i class="icon-blod"></i>
									<i class="icon-bq"></i>
									<i class="icon-img"></i>
								</span>
								<span class="f_right">
									<i class="icon-com"></i>
								</span>
							</div>
						</div>

					</section>
				</div>
				<div ref="border" class="editoContent">
					<textarea @focus="focu" @blur="blurs"></textarea>
					<button class="edito-btn" @click="sendComment">发送</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Service from "@/service/service";
export default {
  data() {
    return {
      positionDetail: {},
      positionDesc: {},
      marketData: [],
      temperaryData: [],
      foldData: [],
      unfoldInfo: "展开更多",
      unfoldTrue: true,
      detail: {
        phone: "",
        password: 0
      }
    };
  },
  created: function() {
    let _this = this;
    let detailData = {
      userId: "allll",
      password: "ddd",
      param: {
        positionId: "34",
        positionType: "",
        hot: "",
        hotcity: "420100"
      }
    };
    // 顶部信息
    Service.myAjax(
      {
        method: "post",
        url: Service.baseUrl + "/position/adminDetail",
        data: detailData
      },
      function(response) {
        _this.positionDetail = response.data.data.detail;
      },
      function(error) {}
    );
    let descData = {
      userId: "allll",
      password: "ddd",
      param: {
        detail: {
          id: "12",
          positionId: ""
        }
      }
    };
    // 职位介绍
    Service.myAjax(
      {
        method: "post",
        url: Service.baseUrl + "/position/getIntroduce",
        data: descData
      },
      function(response) {
        _this.positionDesc = response.data.data.list[0];
      },
      function(error) {}
    );
    let positionMarket = {
      userId: "allll",
      password: "ddd",
      param: {
        detail: {
          pmId: "",
          positionId: "1"
        }
      }
    };
    // 表格数据
    Service.myAjax(
      {
        method: "post",
        url: Service.baseUrl + "/position/getMarket",
        data: positionMarket
      },
      function(response) {
        debugger;
        _this.temperaryData = response.data.data.list;
        for (let index = 0; index < 5; index++) {
          _this.marketData.push(response.data.data.list[index]);
          _this.foldData.push(response.data.data.list[index]);
        }
      },
      function(error) {}
    );
    // 评论
    let commentData = {
      userId: "allll",
      password: "ddd",
      param: {
        detail: {
          userId: "11",
          toUserId: "11",
          mainId: "11",
          type: "news"
        }
      }
    };
    Service.myAjax(
      {
        method: "post",
        url: Service.baseUrl + "/dynamic/searchComments",
        data: commentData
      },
      function(response) {
        // 是评论数据，由于接口没有返回值，须在调试
      },
      function(error) {}
    );
  },
  computed: {

  },
  methods: {
    // 发送评论的方法
    sendComment() {
      let sendData = {
        userId: "allll",
        password: "ddd",
        param: {
          detail: {
            id: "56",
            userId: "11",
            toUserId: "11",
            mainId: "11",
            comment: "测试comment"//这个值是评论内容，自行获取
          }
        }
      };
      Service.myAjax(
      {
        method: "post",
        url: Service.baseUrl + "/dynamic/saveComment",
        data: sendData
      },
      function(response) {
        // 这里是评论的数据，由于接口没有返回值，须再调试
      },
      function(error) {}
    );

    },
    // 展开更多方法
    showMore() {
      debugger;
      if (this.unfoldTrue) {
        this.marketData = this.temperaryData;
        this.unfoldInfo = "点击收起";
        this.unfoldTrue = false;
      } else {
        this.marketData = this.foldData;
        this.unfoldInfo = "展开更多";
        this.unfoldTrue = true;
      }
    },
    focu() {
      let el = this.$refs.border;
      el.style.border = "1px solid #fdc901";
    },
    blurs() {
      let el = this.$refs.border;
      el.style.border = "";
    }
  },
  send() {
    let data = {
      param: {
        detail: {
          textarea: this.detail.textarea
        }
      }
    };
    Services.myAjax({
      method: "post",
      url: Services.baseUrl + "/DetailSelector/send",
      data: data
    });
  }
};
</script>
<style lang="scss" scoped>
.main {
  width: 960px;
  //margin-right: -560px;
  .v_head {
    background: #f5f5f5;
    padding-bottom: 30px;
    .v_title {
      padding: 30px 0 30px 30px;
      img {
        width: 60px;
        height: 60px;
      }
      .v_span {
        padding-left: 16px;
        font-weight: 800;
      }
    }
    .v_font {
      padding-left: 30px;
      h4 {
        // padding-bottom:10px;
        display: flex;
        .v_name {
          .ali {
            font-size: 20px;
            color: #333;
            font-weight: bold;
          }
          .v_content {
            font-size: 18px;
            color: #404040;
            margin-top: 10px;
            i {
              color: #2147eb;
            }
          }
        }
      }
    }
    .el_content {
      margin: 30px 34px 0 34px;
      background: #fff;
    }
  }
  .line {
    background: #f9cf38;
    height: 4px;
    margin: 30px 0;
  }
  .v_info {
    font-size: 20px;
    font-weight: 800;
    padding: 26px 0 30px 30px;
  }
  .v_table {
    margin: 0 30px;
    .showMore {
      font-size: 14px;
      text-align: center;
      padding-top: 30px;
      span {
        cursor: pointer;
      }
    }
  }
  .h2 {
    font-weight: 800;
    padding-bottom: 20px;
    font-size: 22px;
  }
  .h3 {
    font-size: 16px;
    line-height: 24px;
    color: #666;
  }
  .pt {
    padding-bottom: 26px;
  }
  .v_pic {
    padding: 40px 0 30px 0;
  }
  .discuss {
    background: #f5f5f5;
    padding-top: 30px;
    padding-bottom: 30px;
    .des_wrap {
      display: flex;
      .dec_pic {
        width: 100px;
        text-align: center;
        img {
          width: 50px;
          height: 50px;
        }
      }
      .dec_desc {
        width: 830px;
        .dec_container {
          display: flex;
          justify-content: space-between;
          font-size: 18px;
          .dec_title {
            .text {
              color: #222;
              font-size: 22px;
              padding-top: 4px;
              padding-bottom: 9px;
            }
            .date {
              color: #666;
            }
          }
          .right1 {
            img {
              width: 22px;
            }
            .right {
              color: #222;
              font-size: 22px;
            }
          }
        }
        .content {
          padding-top: 26px;
          font-size: 16px;
          color: #333;
          line-height: 20px;
          font-weight: 800;
          padding-right: 10px;
        }
        .remove {
          padding-top: 30px;
          height: 30px;
          a {
            float: right;
            font-size: 16px;
            color: #318bff;
          }
        }
      }
    }
    // 第二个聊天记录
    .huifu {
      padding-top: 30px;
      background: #fff;
      width: 900px;
      margin: 0 auto;
      .des_wrap {
        display: flex;
        .dec_pic {
          width: 100px;
          text-align: center;
          img {
            width: 40px;
            height: 40px;
          }
        }
        .dec_desc {
          width: 830px;
          .dec_container {
            display: flex;
            justify-content: space-between;
            font-size: 18-4px;
            .dec_title {
              .text {
                color: #222;
                font-size: 22-4px;
                padding-top: 4px;
                padding-bottom: 9px;
              }
              .date {
                color: #666;
              }
            }
            .right1 {
              img {
                width: 22px;
              }
              .right {
                color: #222;
                font-size: 22-4px;
              }
            }
          }
          .content {
            padding-top: 26px;
            font-size: 16px;
            color: #333;
            line-height: 20px;
            font-weight: 800;
          }
          .remove {
            padding-top: 30px;
            height: 30px;
            a {
              float: right;
              font-size: 16px;
              color: #318bff;
            }
          }
        }
      }
    }
    .huifu2 {
      margin-top: 20px;
    }
  }
}
#edito {
  font-size: 28px;
  width: 660px;
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  margin-right: 24px;
  .f_right {
    float: right;
    i {
      cursor: pointer;
    }
    i:hover {
      opacity: 0.4;
    }
  }
  .f_left {
    padding-left: 40px;
    i {
      padding-left: 10px;
      cursor: pointer;
    }
    i:hover {
      opacity: 0.4;
    }
    i:nth-child(1) {
      font-size: 28px;
      color: #318afb;
    }
    i:nth-child(2) {
      font-size: 24px;
      color: #bababa;
    }
    i:nth-child(3) {
      font-size: 20px;
      position: relative;
      top: -4px;
    }
    i:nth-child(4) {
      font-size: 34px;
      position: relative;
      top: 3px;
    }
    i:nth-child(5) {
      font-size: 26px;
    }
  }
}
.editoContent {
  width: 850px;
  margin: 0 auto;
  min-height: 160px;
  border: 1px solid #adadad;
  margin-top: 10px;
  position: relative;
  textarea {
    resize: none;
    font-size: 18px;
    padding: 10px;
    width: 97%;
    height: 94px;
  }
  .edito-btn {
    position: absolute;
    bottom: 10px;
    right: 20px;
    background: #ffc902;
    color: #fff;
    width: 70px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
  }
}
</style>
<style lang="scss">
.is-leaf .cell {
  color: #3774f1;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.el-table__row > td > .cell {
  text-align: center;
  color: #333;
  font-size: 18px;
}
</style>
